<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
    <style>
    .header, .nav, .main, .footer {
            border-radius: 10px;
            background-color: green;
            margin-bottom:10px;
            color: white;
            min-height: 50px;
            text-align: center;
        }
        .main {
            display: flex;
        }
        .article {
            flex: 1;
            margin-right: 10px;
            background-color: pink;
        }
        .aside {
            width: 30%;
            background-color: red;
        }
    </style>
</head>
<body>
    <header class="header">
        header
    </header>
    <nav class="nav">nav</nav>
    <main class="main">
        <article class="article">
            <h1 class="title">什么是html5语义化标签</h1>
            <ul>
                <li>标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。</li>
                <li>有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？</li>
                <li>有利于构建清晰的机构，有利于团队的开发、维护。</li>
            </ul>
            <section class="section">
                comments
            </section>
        </article>
        <aside class="aside">
            aside
        </aside>
    </main>
    <footer class="footer">
        footer
    </footer>
</body>
</html>